<template>
  <div class="comments">
      
    <!-- 评论输入框 -->
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4}"
        placeholder="请输入评论"
        v-model="textarea">
      </el-input>

    <el-badge :value="data.length" class="item">
  <el-button size="small" @click="addcomments">评论</el-button>
    </el-badge>
    
    <!-- 评论列表 -->
    <ul>
        <li v-for="i in data" :key="i.comId">
            <span><el-avatar> {{i.comName}} </el-avatar></span>
            <p>{{i.comName}}说 :{{i.comContent}}</p>
        </li>
         
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return {
            textarea:'',
            data:[],
        }
    },
    props:{
        aId:{
            type:Number
        }
    }
    ,
    methods:{
        async addcomments(){
            const data = await this.axios.get("/comments/add",{
                params: {
                    aId:this.aId,
                    userId:this.$store.state.logininfo.id,
                    comName:this.$store.state.logininfo.username,
                    comContent:this.textarea
                },
            });
            this.textarea='';
            this.initcomments();
            console.log(data);
        },
        async initcomments(){
            const data = await this.axios.get("/comments/getbyid",{
                params: {
                    i:this.aId,
                },
            });
            this.data = data.data
            console.log(data);
        }
    },
    created(){
        console.log('初始化咯');
        this.initcomments();
    },
    beforeUpdate(){
        console.log("comment数据发生了变化");
    },
    updated(){
        console.log('comm完事了');
    },
    watch:{
        aId: async function(val){
            console.log(val);
             const data = await this.axios.get("/comments/getbyid",{
                params: {
                    i:val,
                },
            });
            this.data = data.data
            // this.initcomments()
        }
        
    }
}
</script>

<style lang="less" scoped>

.item{
    float: right;
}
ul{
    margin-top: 40px;

    li{
        display: flex;
        list-style: none;
        margin: 25px 0;
        flex-direction: row;
        min-height: 40px;
        position: relative;
        span{
           height: 40px;
           width: 40px; 
           margin-right: 10px;
        }
        p{
            justify-content: center;
            line-height: 40px;
        }
    }

}

</style>>
